<template>
	<view class="tarbar-view">
		<view class="tarbar-list" :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '0rpx solid ' + tabBar.borderStyle : 0
            }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index"
					@click.top="setSelected(item,index)" :style="{'background-color':selected==index?'':''}">
					<!-- <view class="lineto" v-if="index!==0"></view> -->
					<view class="new-bar-message">
						<view class="tarbar-list-li-icon">
							<image :src="selected === index ? item.selectedIconPath : item.iconPath" mode="heightFix" />
						</view>
						<view class="tarbar-list-li-name"
							:style="{color:selected ===  index ? tabBar.selectedColor: '#272727'}">
							{{ item.text }}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: '',
				tabBar: {
					color: '#ffffff',
					selectedColor: '#0480FB',
					borderStyle: '#ccc',
					backgroundColor: 'transparent',
					position: 'top',
					list: [{
							pagePath: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list',
							iconPath: '/static/socialized-service/specialist-consultation/bottom-tabar/diagnosis.svg',
							selectedIconPath: '/static/socialized-service/specialist-consultation/bottom-tabar/diagnosis-1.svg',
							text: '问诊大厅'
						},
						{
							pagePath: '/subPage1/socialized-service/specialist-consultation/user-module/expert-information/expert-information',
							iconPath: '/static/socialized-service/specialist-consultation/bottom-tabar/expert.svg',
							selectedIconPath: '/static/socialized-service/specialist-consultation/bottom-tabar/expert-1.svg',
							text: '专家库'
						},
						{
							pagePath: '/subPage1/socialized-service/specialist-consultation/user-module/my-consultation/my-consultation',
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen-1.svg",
							text: '我的问诊'
						},
						{
							pagePath: '/subPage1/socialized-service/specialist-consultation/user-module/door-service/my-order/my-order',
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/order.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/order-1.svg",
							text: '我的预约'
						},
						{
							pagePath: '/subPage1/socialized-service/specialist-consultation/user-module/expert-list/expert-list',
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/experts.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/experts-1.svg",
							text: '专家咨询'
						}
					]
				},
			}
		},
		// props:{
		// 	selected:{
		// 		type:Number || String,
		// 		default:()=>{
		// 			return ''
		// 		}
		// 	}
		// },
		mounted() {
			this.setselectindex()
		},
		methods: {
			// 获取获取当前处于那个页面，判断index
			setselectindex() {
				let routes = getCurrentPages()
				let curRoute = routes[routes.length - 1].route
				if (curRoute ===
					'subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list' ||
					curRoute ===
					'subPage1/socialized-service/specialist-consultation/user-module/consultation-list/post-inquiry/post-inquiry'
				) {
					this.selected = 0
				} else if (curRoute ===
					'subPage1/socialized-service/specialist-consultation/user-module/expert-information/expert-information') {
					this.selected = 1
				} else if (curRoute ===
					'subPage1/socialized-service/specialist-consultation/user-module/my-consultation/my-consultation') {
					this.selected = 2
				} else if (curRoute ===
					'subPage1/socialized-service/specialist-consultation/user-module/door-service/my-order/my-order') {
					this.selected = 3
				} else if (curRoute ===
					'subPage1/socialized-service/specialist-consultation/user-module/expert-list/expert-list') {
					this.selected = 4
				}
			},
			// 点击底部导航栏触发方法
			setSelected(e, i) {
				if (this.selected !== i) {
					this.$store.commit({
						type: 'setTabbarIndex',
						tabindex: i,
					})
					let routes = getCurrentPages()
					uni.redirectTo({
						url: e.pagePath
					})


				}
				// 强制刷新组件状态
				// this.$forceUpdate();
			},

		}
	}
</script>

<style lang="scss" scoped>
  .tarbar-view {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 98;

    // padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
    // padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
    .tarbar-list {
      width: 90%!important;
	  margin-left: 5%!important;
      max-height: 355rpx;
      min-height: 100rpx;
	  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
      color: #4f5153;

      .tarbar-list-ul {
		height: 136rpx;
		box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1,32,45,0.08);
        width: 100%;
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        // padding-bottom: constant(safe-area-inset-bottom);
        // /* 兼容 iOS < 11.2 */
        // padding-bottom: env(safe-area-inset-bottom);
        /* 兼容 iOS >= 11.2 */
        justify-content: space-around;
        // border-top:  1px solid #ebedf0;

        .tarbar-list-li {
          width: 20%;
          height: 136rpx;
          text-align: center;
          display: flex;
          // flex-direction: column;
          // justify-content: center;
          align-items: center;
          justify-content: center;

          // .lineto{
          // 		float: left;
          // 		height: 100rpx;
          // 		width: 3rpx;
          // 		background-image: linear-gradient(to top,#4d586f,#ffffff,#4d586f);
          // 	}
          .new-bar-message {
            width: calc(100% - 2px);
            height: 136rpx;
            // background-color: #4CD964;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .tarbar-list-li-icon {
              width: 50rpx;
              // height: 60rpx;
              margin: 0 0 6rpx;
              // background-color: #00FFEE;
			  image{
				  height: 50rpx;
			  }
            }

            .tarbar-list-li-name {
              // background-color: #00363D;
              width: 180rpx;
              text-align: center;
              line-height: 30rpx;
              font-size: 28rpx;
              font-weight: 500;
              height: 30rpx;
              letter-spacing: 1rpx;
            }
          }
        }
      }
    }
  }
</style>
